import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:http/http.dart' as http;
import 'package:ywn_app/assembly/custom_swiper.dart';
import 'dart:convert';

import 'package:ywn_app/moudle/entity/Images.dart';

class SelectedCategory extends StatefulWidget {
  @override
  _SelectedCategoryState createState() => _SelectedCategoryState();
}

class _SelectedCategoryState extends State<SelectedCategory>
    with AutomaticKeepAliveClientMixin {
  List<Images> bannerList = [];
  List<String> images = [
    "布丁",
    "开心果",
    "棒冰",
    "热狗",
    "牛油果",
    "甜甜圈",
    "碧根果",
    "草莓",
    "薯片",
    "饼干",
  ];
  ScrollController _controller;

  @override
  void initState() {
    super.initState();
    _pullNet();

  }
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  void _pullNet() async {
    await http
        .get(
        'http://webapi.miguvideo.com/gateway/display/v1/data/groups/bfde657872134824ad46f6e67ce43bd5')
        .then((http.Response response) {
      Map<String, dynamic> user = json.decode(response.body);
      setState(() {
        if(user['code'] == 200){
          List list = user['body']['components'][0]['data'];
          list.forEach((element) {
            Images images = new Images();
            images.title = element['title'];
            images.imagesUrl = element['pics']['lowResolutionH'];
            bannerList.add(images);
          });
        }
      });
    });
  }


  @override
  // ignore: must_call_super
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: _controller,
      child: Column(
        children: <Widget>[
          CustomSwiper(images: bannerList),
          Container(
            height: 100,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: images.length,
                itemBuilder: ((BuildContext context, int index) {
                  return Container(
                    margin: EdgeInsets.symmetric(horizontal: 10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset(
                          'images/${images[index]}.png',
                          fit: BoxFit.cover,
                          width: 40,
                          height: 40,
                        ),
                        Text(
                          images[index],
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 12),
                        )
                      ],
                    ),
                  );
                })),
          ),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(left: 5, bottom: 5),
                  height: 24,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        '猜你喜欢',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                      Icon(
                        Icons.chevron_right,
                        size: 20,
                      )
                    ],
                  ),
                ),
                Container(
                  height: 150,
                  child: ListView.builder(
                      itemCount: 5,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: ((BuildContext context, int index) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image: NetworkImage(
                                      'http://pic6.iqiyipic.com/image/20191009/9f/82/v_134752832_m_601_m3_480_270.jpg'),
                                  fit: BoxFit.cover,
                                ),
                                borderRadius: BorderRadius.circular(5),
                              ),
                              margin: EdgeInsets.symmetric(horizontal: 3),
                              child: Container(
                                child: Text(
                                  '42集全',
                                  style: TextStyle(color: Colors.white),
                                  textAlign: TextAlign.center,
                                ),
                                padding: EdgeInsets.symmetric(
                                    vertical: 1, horizontal: 1),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(3),
                                  color: Colors.black54,
                                ),
                              ),
                              width: 160,
                              height: 100,
                              alignment: Alignment.bottomRight,
                              padding: EdgeInsets.only(right: 3, bottom: 3),
                            ),
                            Padding(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 3, vertical: 1),
                                child: Text(
                                  '三生三世十里桃花',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w500,
                                      fontSize: 14),
                                )),
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 3),
                              child: Text(
                                '更新至12集',
                                style: TextStyle(
                                    fontSize: 12, color: Colors.black45),
                              ),
                            ),
                          ],
                        );
                      })),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
